<template>
    <div
        class="temporrary"
        v-loading="pageLoading"
        element-loading-background="rgba(255, 255, 255, 0.7)"
    >
        <el-card class="box-card">
            <div slot="headerss" class="clearfix text_fl">
                <span>调额-->临时额度调整</span>
                <el-button class="btn_close" type="text" @click="handleClose">关闭</el-button>
            </div>
            <div>
                <div>
                    <el-form ref="formData" :model="formData" :rules="rules" label-width="160px">
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="账户类型:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.CATEGORY_filter}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="主卡卡号:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.CARDNO}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <!--<el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="客户号:" class="text_fl">
                                        <span
                                            class="el-form-item-span"
                                        >{{adjustReqInfo.custumtestOut.custnum}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                             <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="账号:" class="text_fl">
                                        <span
                                            class="el-form-item-span"
                                        >{{adjustReqInfo.custumtestOut.acct}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>-->
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="当前信用额度:" class="text_fl">
                                        <span class="el-form-item-span">{{formData.acct_temp_limit}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item label="建议临时额度:" class="text_fl">
                                        <span
                                            class="el-form-item-span"
                                        >{{adjustReqInfo.custumtestOut.tempamount}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item label="上次额度调整日期:" class="text_fl">
                                        <span
                                            class="el-form-item-span"
                                        >{{formData.CREDCHGDAY |filterDateYYYYMMDD}}</span>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item
                                        label="临时额度提升至:"
                                        class="text_fl"
                                        prop="AdjustLimit"
                                    >
                                        <el-input v-model="formData.AdjustLimit"></el-input>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item
                                        label="临时额度生效日期:"
                                        class="text_fl"
                                        prop="templimitsate"
                                    >
                                        <el-date-picker
                                            v-model="formData.templimitsate"
                                            format="yyyy-MM-dd"
                                            value-format="yyyyMMdd"
                                            :picker-options="startOptions"
                                            disabled
                                        ></el-date-picker>
                                    </el-form-item>
                                </div>
                            </el-col>
                            <el-col :span="12">
                                <div class="text_center width30">
                                    <el-form-item
                                        label="临时额度失效日期:"
                                        class="text_fl"
                                        prop="templimitend"
                                    >
                                        <el-date-picker
                                            v-model="formData.templimitend"
                                            format="yyyy-MM-dd"
                                            value-format="yyyyMMdd"
                                            :picker-options="endtOptions"
                                            disabled
                                        ></el-date-picker>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>
                        <!-- <el-row>
                            <el-col :span="10" :offset="1">
                                <div class="text_center width30">
                                    <el-form-item
                                        label="账户额度调整原因:"
                                        class="text_fl"
                                        prop="AdjustReason"
                                    >
                                        <el-select
                                            v-model="formData.AdjustReason"
                                            placeholder="请选择账户额度调整原因！"
                                            clearable
                                        >
                                            <el-option
                                                v-for="item in ADJUSTMENT_option"
                                                :label="item.label"
                                                :value="item.value"
                                                :key="item.value"
                                            ></el-option>
                                        </el-select>
                                    </el-form-item>
                                </div>
                            </el-col>
                        </el-row>-->
                    </el-form>
                    <div class="text_center">
                        <el-button
                            type="primary"
                            :disabled="isdisabled"
                            @click="handerClickFormdata"
                            v-preventReClick
                        >确定调额</el-button>
                        <el-button size="small" type="primary" @click="sendMsg">发送短信</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="handleClickbtn"
                            v-show="ifsuccess"
                        >修改记录查询</el-button>
                    </div>
                </div>

                <el-dialog
                    v-drag
                    title="临时额度调整"
                    :visible.sync="centerDialogVisible"
                    width="500px"
                    :append-to-body="true"
                    top="30vh"
                    :close-on-click-modal="false"
                    center
                >
                    <p>
                        卡号：
                        <span>{{this.formData.CARDNO}}</span>
                    </p>
                    <p>
                        账户类型:
                        <span>{{this.PRODUCT_value}}</span>
                    </p>
                    <p>
                        当前临时额度:
                        <span>{{this.formData.acct_temp_limit}}元</span>
                    </p>
                    <p>
                        临时额度提升至:
                        <span>{{this.formData.AdjustLimit}}元</span>
                    </p>
                    <p class="text_center padding_top15">
                        <span style="color:#3a8ee6; ">您确认要进行临时额度调整？</span>
                    </p>
                    <span slot="footer" class="dialog-footer">
                        <el-button
                            size="small"
                            icon="el-icon-circle-close"
                            @click="centerDialogVisible = false"
                        >取 消</el-button>
                        <el-button
                            type="primary"
                            size="small"
                            @click="setsubmitForm"
                            icon="el-icon-circle-check"
                            v-preventReClick
                        >确定</el-button>
                    </span>
                </el-dialog>
            </div>
        </el-card>
    </div>
</template>
<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
import { ADJUSTMENT } from '@/utils/Contants'
import {
    closePage,
    trimString,
    getDictSelectList,
    itoStr,
    getDictMappingValue, getBusinessMenuId,
} from '@/utils/Common';
export default {
    name: 'TemporaryLines',
    data() {
        return {
            formData: {
                custnum: '',//客户号
                acct: '',//账号
                acct_temp_limit: '',//当前临时额度
                tempamount: '',//建议临时额度
                templimitsate: '',//临时额度生效日期
                templimitend: '',//临时额度失效日期
                AdjustReason: '',//额度调整原因
                AdjustLimit: '',//临时调整金额
            },
            isShowdialog: false,
            centerDialogVisible: false,
            pageLoading: false,
            PRODUCT_value: '',//卡产品
            ADJUSTMENT_option: '',//账户额度调整原因
            adjustReqInfo: {
                custumtestOut: {
                    custnum: '',
                    acct: '',
                    tempamount: '',
                },
            },
            isdisabled: true,
            rules: { // 表单校验规则
                templimitsate: [
                    { required: true, message: '请选择临时额度生效日期！', trigger: 'change' },
                ],
                templimitend: [
                    { required: true, message: '请选择临时额度失效日期！', trigger: 'change' },
                ],
                AdjustLimit: [
                    { required: true, message: '临时调整金额不能为空！', trigger: 'change' },
                ],
                AdjustReason: [
                    { required: true, message: '账户额度调整原因为必填项', trigger: 'change' },
                ]

            },
            startOptions: { // 开始日期选择 限制
                disabledDate: (time) => {
                    return time.getTime() < Date.now();
                },
            },
            endtOptions: { // 结束日期选择限制
                disabledDate: (time) => {
                    if (this.formData.templimitsate) {
                        return time.getTime() < new Date(moment(this.formData.templimitsate).format('YYYY-MM-DD HH:mm:ss')).getTime() || time.getTime() > new Date(moment(this.formData.templimitsate).add(30, 'days').format('YYYY-MM-DD HH:mm:ss')).getTime();
                    }
                },
            },
            MenuId: '',
            ifsuccess: false,
        }
    },
    computed: {
        ...mapGetters([
            'cardInfo_3004',
            'cardAccountInfo_3001',
            'defaultParams',
            'pinFlag',
            'businessMenu',
        ]),
    },
    filters: {
        filterDateYYYYMMDD: (value) => {
            value = (`${value}`).trim();
            if (value === '00000000') return '';
            if (value) {
                return moment(value, 'YYYYMMDD').format('YYYY-MM-DD');
            }
            return '';
        },

    },
    async mounted() {
        this.pageLoading = true;
        this.formData.CREDCHGDAY = this.cardAccountInfo_3001.CREDCHGDAY;//上次额度调整日期
        this.formData.ACTIVDAY = this.cardInfo_3004.ACTIVDAY;//卡片激活日期
        this.formData.CARDNO = this.cardInfo_3004.CARDNO || this.cardInfo_3004.CARDNBR;

        this.formData.pinFlag = this.pinFlag; // 0-不检查密码 1-检查卡片级查询密码 2-检查取款密码 3-检查客户级查询密码
        // this.formData.KEYTYPE = this.cardInfo_3004.KEYTYPE;// 证件类型
        // this.formData.CUSTID = this.cardInfo_3004.CUSTID;// 证件类型
        this.ADJUSTMENT_option = ADJUSTMENT;
        this.formData.templimitsate = moment().format('YYYYMMDD');//临时额度生效日期
        this.formData.templimitend = moment().add(30, 'days').format('YYYYMMDD');//临时额度失效日期
        await this.getadjustReqInfo();
        // this.setCardServerQuery();//3014
        this.getInit();

        // 客户号
        // 
    },
    methods: {
        // 初始化页面数据 请求数据字典里的字段
        async getInit() {
            // this.formData.CATEGORY = this.cardInfo_3004.CATEGORY
            // 卡产品
            this.formData.CATEGORY_filter = await getDictMappingValue('CATE', this.cardInfo_3004.CATEGORY, this);
            console.log('this.cardInfo_3004', this.cardInfo_3004);
            this.PRODUCT_value = await getDictMappingValue('PRODUCT', this.cardInfo_3004.PRODUCT, this);
            this.pageLoading = false;
            this.formData.acct_temp_limit = this.cardAccountInfo_3001.TEMPLIMIT;
        },


        // 开始进行二次确认
        handerClickFormdata() {
            this.centerDialogVisible = true;// 关闭弹框
        },
        //页面进来查询  adjustReq 接口
        async getadjustReqInfo() {
            let params = {
                bankid: '6440',
                Card: this.formData.CARDNO,//卡号
                // PINFLAG: this.pinFlag,// 验密
                num: '14',//客户号
                acct: '0',// 账号
                limit_request_bef_days: '-9999',//永久额度邀约据今天数
                templimit_request_bef_days: '-9999',//临时额度邀约据今天数
                limit_adjust_bef_days: '-9999',//永久额度调整生效距今天数
                templimit_adjust_bef_days: '-9999',//临时额度生效截止日期距今天数
                Channel: 'KF',//渠道名称
                flag: '21',//查询标记 15查询  20永，临调额 21永，临 调额查询
                AdjustType: '2',//调额类型 1永久额度 2临时额度 3临时调额
                AdjustReason: '3',//调额原因
                AdjustLimit: '0',//调额金额
                custnum: '',
                // tempDate: '',//临时有效额度
            }
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '8001';// 修改交易号
            defaultParams.body.appBody = params

            await this.$post.common.adjustReq(defaultParams).then((res) => {
                if (res.status === 200) { // 请求成功
                    const adjustReqInfo = JSON.parse(res.data.jsonRes);
                    console.log(adjustReqInfo, 'adjustReqInfo');
                    if (adjustReqInfo.sysHead.rspCd === '9999') {

                        const ErrorMessage = `交易代码：${adjustReqInfo.sysHead.rspCd} ` + '交易信息信息：用户不存在或者账户不支持调额';
                        this.$alert(ErrorMessage, adjustReqInfo.sysHead.busiName, { customClass: 'warning', type: 'warning' });
                    } else if (adjustReqInfo.sysHead.rspCd === 'T000' || adjustReqInfo.sysHead.rspCd === 'T800') { // 交易成功
                        this.adjustReqInfo = adjustReqInfo.body.appBody;
                        this.isdisabled = false;
                    } else {
                        const ErrorMessage = `错误码：${adjustReqInfo.sysHead.rspCd} ` + `错误信息：${adjustReqInfo.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, adjustReqInfo.sysHead.busiName, { customClass: 'error', type: 'error' });
                    }
                }
            });
        },

        // // 发送请求 开始修改账单日 4060 修改客户名下所有账户的账单日
        setsubmitForm() {
            this.centerDialogVisible = false;// 关闭弹框
            let params = {
                bankid: '6440',
                Card: this.formData.CARDNO,//卡号
                // PINFLAG: this.pinFlag,// 验密
                num: '14',//客户号
                acct: this.adjustReqInfo.custumtestOut.acct,// 账号
                limit_request_bef_days: '-9999',//永久额度邀约据今天数
                templimit_request_bef_days: '-9999',//临时额度邀约据今天数
                limit_adjust_bef_days: '-9999',//永久额度调整生效距今天数
                templimit_adjust_bef_days: '-9999',//临时额度生效截止日期距今天数
                Channel: 'KF',//渠道名称
                flag: '20',//查询标记 15查询  20永，临调额 21永，临 调额查询
                AdjustType: '2',//调额类型 1永久额度 2临时额度 3临时调额
                AdjustReason: this.formData.AdjustReason,//调额原因
                AdjustLimit: this.formData.AdjustLimit,//调额金额
                // tempDate: '',//临时有效额度
            }
            const defaultParams = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParams.body.appHead.tranCode = '8001';// 修改交易号
            defaultParams.body.appBody = params;

            this.$post.common.adjustReq(defaultParams).then(async (res) => {
                if (res.status === 200) { // 请求成功
                    const adjustReqInfo = JSON.parse(res.data.jsonRes);
                    console.log(adjustReqInfo, 'adjustReqInfo');
                    if (adjustReqInfo.sysHead.rspCd === '9999') {

                        const ErrorMessage = `交易代码：${adjustReqInfo.sysHead.rspCd} ` + '交易信息信息：用户不存在或者账户不支持调额';
                        this.$alert(ErrorMessage, adjustReqInfo.sysHead.busiName, { customClass: 'warning', type: 'warning' });
                    } else if (adjustReqInfo.sysHead.rspCd === 'T000' || adjustReqInfo.sysHead.rspCd === 'T800' || adjustReqInfo.sysHead.rspCd === '000000') { // 交易成功
                        this.ifsuccess = true;
                        const ErrorMessage = `响应码：${adjustReqInfo.sysHead.rspCd} ` + `响应信息：${adjustReqInfo.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, '临时额度额度调整', { customClass: 'success', type: 'success' });
                        this.adjustReqInfo = adjustReqInfo.body.appBody;
                        this.isdisabled = false;
                        await this.get3001();
                    } else {
                        const ErrorMessage = `错误码：${adjustReqInfo.sysHead.rspCd} ` + `错误信息：${adjustReqInfo.sysHead.rspMsg}`;
                        this.$alert(ErrorMessage, adjustReqInfo.sysHead.busiName, { customClass: 'error', type: 'error' });
                    }
                }
            });
        },
        async get3001() {
            const defaultParamInfos = JSON.parse(JSON.stringify(this.defaultParams));
            defaultParamInfos.body.appHead.tranCode = '3001';// 修改交易号
            defaultParamInfos.body.appBody = {
                PINFLAG: '0',
                PIN: '',
                CARDNO: this.formData.CARDNO || this.cardInfo_3004.CARDNO,// 卡号
            }
            await this.$post.common.transPort(defaultParamInfos).then((res) => {
                if (res.status === 200) { // 请求成功
                    const cardlossofs = JSON.parse(res.data.jsonRes);
                    console.log(cardlossofs, '3001信用卡账户查询');
                    if (cardlossofs.sysHead.rspCd == '000000') { // 交易成功
                        // 更新 vuex 缓存 卡账户信息
                        // this.cardAccountInfos_3001 =  cardlossofs.body.appBody;
                        let data = cardlossofs.body.appBody;
                        this.$store.commit('common/UPDATE_CARD_ACCOUNT_INFO', data);
                    }
                }
            });
        },
        // 发送短信
        sendMsg() {

            // const AMOUNT = this.isChecked.CURRNUM === '156' ? `${this.isChecked.AMTFLAG}${this.isChecked.AMOUNT}` : '0.0';
            // const UAMOUNT = this.isChecked.CURRNUM === '840' ? `${this.isChecked.AMTFLAG}${this.isChecked.AMOUNT}` : '0.0';
            // const PURDATESTR = this.isChecked.PURDATE.toString();
            // const PURDATE = `${PURDATESTR.substr(0, 4)}-${PURDATESTR.substr(4, 2)}-${PURDATESTR.substr(6, 2)}`;
            // const tempContent = `记账日：${PURDATE}，人民币交易金额：${AMOUNT}元，美元交易金额：${UAMOUNT}美元，交易描述：${this.isChecked.DESLINE1.trim()}${this.isChecked.DESLINE2.trim()}，卡号末四位：${this.isChecked.CARDEND.toString().padStart(4, '0')}。`;
            this.$router.push({
                name: 'dynamicMessage',
                path: '/index/dynamicMessage',
                params: {
                    tempName: '临额申请失败',
                    //tempContent,
                },
            });
        },
        handleClickbtn() {
            this.MenuId = getBusinessMenuId('/businessSystem/accountCardDetaileQuery', this.businessMenu);
            console.log('this.MenuId____', this.MenuId);
            this.$router.push({ name: 'accountCardDetaileQuery', path: '/businessSystem/accountCardDetaileQuery', params: { id: this.MenuId } });
        },
        // 点击关闭
        handleClose() {
            closePage(this.$route, this, 1);
        },
    }
}
</script>
<style lang="scss">
.temporrary {
    .el-card {
        border: none;
    }
    .el-card__header {
        padding: 8px !important;
    }
    .el-form-item__content {
        text-align: left;
    }
}
</style>
<style lang="scss" scope>
</style>